window.addEventListener('load', function () {
    // 下拉app
    var app = document.querySelector('#app');
    var apptu = document.querySelector('.app-tu');
    app.addEventListener('mouseover', function () {
        apptu.style.display = 'block';
        app.style.color = '#fff';
    });
    apptu.addEventListener('mouseover', function () {
        apptu.style.display = 'block';
        app.style.color = '#fff';
    });
    app.addEventListener('mouseout', function () {
        apptu.style.display = 'none';
        app.style.color = '#B0B0B0';
    });
    apptu.addEventListener('mouseout', function () {
        apptu.style.display = 'none';
        app.style.color = '#B0B0B0';
    });
    // 侧面导航栏
    var navCeJingguo = document.querySelector('.nav-ce-jingguo');
    var navCeTu = document.querySelector('.nav-ce-tu');
    navCeJingguo.addEventListener('mouseover', function () {
        navCeTu.style.display = 'block';
    });
    navCeTu.addEventListener('mouseover', function () {
        navCeTu.style.display = 'block';
    });
    navCeJingguo.addEventListener('mouseout', function () {
        navCeTu.style.display = 'none';
    });
    navCeTu.addEventListener('mouseout', function () {
        navCeTu.style.display = 'none';
    });
    // 购物车
    var topright2 = document.querySelector('.top-right2');
    var car = document.querySelector('.car');
    topright2.addEventListener('mouseover', function () {
        car.style.display = 'block';
    });
    car.addEventListener('mouseover', function () {
        car.style.display = 'block';
    });
    topright2.addEventListener('mouseout', function () {
        car.style.display = 'none';
    });
    car.addEventListener('mouseout', function () {
        car.style.display = 'none';
    });
    // 返回顶部
    var goTop = document.querySelector('.go-top');
    document.addEventListener('scroll', function () {
        if (window.pageYOffset >= 900) {
            goTop.style.display = 'block';
        } else {
            goTop.style.display = 'none';
        }
    });
    goTop.addEventListener('click', function () {
        window.scroll(0, 0);
    })
    // 动画函数
    // 原理通过setInterval()不断移动盒子位置
    // 1.先获取盒子当前的位置
    // 2让盒子再当前位置+上移动距离
    // 3用定时器不断重复移动操作
    function animate(obj, target, times, play) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                if (play) {
                    play();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, times);
    }
    // 小米图标
    var apppic = document.querySelector('.app-pic');
    var pic = document.querySelector('.pic');
    pic.addEventListener('mouseover', function () {
        animate(apppic, 0, 5);
    })
    pic.addEventListener('mouseout', function () {
        animate(apppic, -55, 5);
    })
    // 搜索栏
    var headerSearch = document.querySelector('.header-search');
    var headerText = headerSearch.querySelector('input');
    var headerButton = headerSearch.querySelector('button');
    var headerSearchUl = headerSearch.querySelector('ul');
    var headerBd = document.querySelector('.header-bd');
    var headerBd1 = headerBd.querySelectorAll('a');
    var xlb = document.querySelector('.xlb');
    for (var i = 0; i < headerBd1.length - 2; i++) {
        headerBd1[i].addEventListener('mouseover', function () {
            xlb.style.display = 'block';
        })
    }
    headerBd.addEventListener('mouseout', function () {
        xlb.style.display = 'none';
    })
    // for (var i=0;i<headerBd1.length;i++){
    //     headerBd.addEventListener('mouseout',function(){
    //         xlb.style.display='none';
    //     })
    // }

    // 下拉表模块
    xlb.addEventListener('mouseover', function () {
        xlb.style.display = 'block';
    })
    xlb.addEventListener('mouseout', function () {
        xlb.style.display = 'none';
    })
    headerText.addEventListener('focus', function () {
        headerButton.style.borderColor = '#FF6700';
        headerSearchUl.style.display = 'block';
    })

    headerText.addEventListener('blur', function () {
        headerButton.style.borderColor = '#E0E0E0';
        headerSearchUl.style.display = 'none';
    })
    headerButton.addEventListener('mouseover', function () {
        headerButton.style.backgroundColor = '#FF6700';
        headerButton.style.color = '#fff';
    })
    headerButton.addEventListener('mouseout', function () {
        headerButton.style.backgroundColor = '#fff';
        headerButton.style.color = '#616161';
    })
    // banner 
    var bannerleft = document.querySelector('.bannerleft').querySelectorAll('li')
    var cela = document.querySelector('.cela');
    for (var i = 0; i < bannerleft.length; i++) {
        bannerleft[i].addEventListener('mouseover', function () {
            cela.style.display = 'block';
        })
        bannerleft[i].addEventListener('mouseout', function () {
            cela.style.display = 'none';
        })
    }
    cela.addEventListener('mouseover', function () {
        cela.style.display = 'block';
    })
    cela.addEventListener('mouseout', function () {
        cela.style.display = 'none';
    })
    // var celaA=cela.querySelectorAll('a');
    // for (let i=0;i<celaA.length;i++){
    //     celaA[i].addEventListener('mouseover',function(){
    //         console.log(i);
    //         celaA[i].style.color='#FF6700';
    //     })
    // }

    // 轮播图
    var arrow1 = document.querySelector('.arrow1');
    var arrow2 = document.querySelector('.arrow2');
    var box = document.querySelector('.beijing');
    var ul = document.querySelector('.beijing-pic');
    var ol = document.querySelector('.circle');
    var boxWidth = box.offsetWidth;
    var num = 0;
    var circle = 0;
    box.addEventListener('mouseover', function () {
        arrow1.style.display = 'block';
        arrow2.style.display = 'block';
        clearInterval(timer2);
        timer2 = null;
    })
    box.addEventListener('mouseout', function () {
        arrow1.style.display = 'none';
        arrow2.style.display = 'none';
        timer2 = setInterval(function () {
            arrow2.click();
        }, 5000);
    })
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        // 记录小圆圈索引号
        li.setAttribute('index', i);
        ol.appendChild(li);
        // 小圆圈排他思想
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'beijing-xuanzhong';
            // 点击圆圈移动图片
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            console.log(box);
            console.log(boxWidth);
            animate(ul, -index * boxWidth, 15);
        })
    }
    ol.children[0].className = 'beijing-xuanzhong';
    // 科隆第一张图片放到最后一张
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 节流阀
    var flag = true;
    // 右侧按钮点击事件
    arrow2.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == ol.children.length) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * boxWidth, 15, function () {
                flag = true;
            });
            circle++;
            if (circle == ul.children.length - 1) {
                circle = 0;
            }
            circleChange();
        }
    });
    // 左侧按钮点击事件
    arrow1.addEventListener('click', function () {
        if (flag) {
            //   flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * boxWidth + 'px';

            }
            num--;
            animate(ul, -num * boxWidth, 15, function () {
                flag = true;
            });
            circle--;
            if (circle < 0) {
                circle = ul.children.length - 2;
            }
            circleChange();
        }
    });
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'beijing-xuanzhong';
    }
    var timer2 = setInterval(function () {
        arrow2.click();
    }, 5000);
    // 倒计时
    var shi = document.querySelector('.shi');
    var fen = document.querySelector('.fen');
    var miao = document.querySelector('.miao');
    var changci = document.querySelector('.changci');
    var wenzi = document.querySelector('.dao-wenzi');
    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth() + 1;//得到月份
    var date = now.getDate();//得到日期
    var jintian;
    var hours = now.getHours();
    if (hours < 9) {
        changci.innerHTML = '00:00场';
        wenzi.innerHTML = '距离结束还有';
        jintian = year + '-' + month + '-' + date + ' ' + '9:00:00';
    } else if (hours < 12) {
        changci.innerHTML = '12:00场';
        wenzi.innerHTML = '距离开始还有';
        jintian = year + '-' + month + '-' + date + ' ' + '12:00:00';
    } else if (hours < 15) {
        changci.innerHTML = '12:00场';
        wenzi.innerHTML = '距离结束还有';
        jintian = year + '-' + month + '-' + date + ' ' + '15:00:00';
    } else if (hours < 16) {
        changci.innerHTML = '16:00场'
        wenzi.innerHTML = '距离开始还有';
        jintian = year + '-' + month + '-' + date + ' ' + '16:00:00';
    } else if (hours < 22) {
        changci.innerHTML = '16:00场';
        wenzi.innerHTML = '距离结束还有';
        jintian = year + '-' + month + '-' + date + ' ' + '20:00:00';
    } else {
        changci.innerHTML = '24:00场';
        wenzi.innerHTML = '距离开始还有';
        jintian = year + '-' + month + '-' + date +' '+'24:00:00';  
    } 
    var inputTime = +new Date(jintian);
    var nowTime = +new Date();
    var times = (inputTime - nowTime) / 1000;
    countDow();
    var times3 = setInterval(countDow, 1000)
    function countDow() {
        nowTime = +new Date();
        times = (inputTime - nowTime) / 1000;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        shi.innerHTML = h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        fen.innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        miao.innerHTML = s;
    }
});
